<template>
  <div class="ProcessEntryBlock">
    <div
      class="it"
      v-for="item in apply"
      :key="item.img"
      @click="$router.push({ name: 'processCenter', params: { id: item.id } })"
    >
      <div>
        <img :src="item.img" alt="" />
      </div>
      <span>
        {{ item.message }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProcessEntryBlock",
  data() {
    return {
      apply: [
        {
          id: 1,
          img: require("@/assets/images/apply_icon.svg"),
          message: this.$t("我的申请", "index.myApply"),
        },
        {
          id: 0,
          img: require("@/assets/images/todo_icon.svg"),
          message: this.$t("我的待办", "index.myTodo"),
        },
        {
          id: 3,
          img: require("@/assets/images/noRead_icon.svg"),
          message: this.$t("未读知会", "index.unRead"),
        },
        {
          id: 4,
          img: require("@/assets/images/expactTodo_icon.svg"),
          message: this.$t("预计待办", "index.willTodo"),
        },
      ],
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.ProcessEntryBlock {
  width: 100%;
  height: 86px;
  display: flex;
  align-items: center;
  background-color: #fff;
  margin-bottom: 16px;
  border-radius: 8px;
  .it {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    color: rgb(31, 35, 41);
    span {
      max-width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .it:hover {
    cursor: pointer;
  }
}
</style>
